<template>
  <van-tabbar v-model="active" active-color="#FC1E09" class="custom-tabbar">
    <van-tabbar-item name="shouye" to="/">
      <span>首页</span>
      <template #icon="props">
       <img :src="props.active ? shouye_selected : shouye" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item name="dingdan" to="/order">
      <span>订单</span>
      <template #icon="props">
       <img :src="props.active ? dingdan_selected : dingdan" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item name="renwu" to="/task">
      <span>任务</span>
      <template #icon="props">
       <img :src="props.active ? renwu_selected : renwu" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item name="wode" to="/mine">
      <span>我的</span>
      <template #icon="props">
       <img :src="props.active ? wode_selected : wode" />
      </template>
    </van-tabbar-item>
  </van-tabbar>

</template>
<script setup lang="ts">
import {ref,reactive} from "vue"
import { useRouter, useRoute } from "vue-router"
import shouye from "../assets/images/shouye.png"
import shouye_selected from "../assets/images/shouye_select.png"
import dingdan from "../assets/images/dingdan.png"
import dingdan_selected from "../assets/images/dingdan_select.png"
import wode from "../assets/images/wode.png"
import wode_selected from "../assets/images/wode_select.png"
import renwu from "../assets/images/renwu.png" 
import renwu_selected from "../assets/images/renwu_select.png"
import { watch, onMounted } from "vue";
import { useTokenStore } from "../stores/Login";


 const active = ref<any>("shouye");
 const router = useRouter();
  const route = useRoute();
// 监听路由变化
watch(route, (newRoute) => {
  if (newRoute.name === "mine") {
    active.value = "wode";
  }else if(newRoute.name === "order"){
    active.value = "dingdan";
  }else if(newRoute.name === "task"){
    active.value = "renwu";
  }
});

// 在组件挂载时检查当前路由
onMounted(() => {
  if (route.name === "mine") {
    active.value = "wode";
  }else if(route.name === "order"){
    active.value = "dingdan";
  }else if(route.name === "task"){
    active.value = "renwu";
  }


});

</script>
<style lang="less" scoped>
.custom-tabbar {
  --van-tabbar-height:61px;
  
}
img{
  width: 30px;
  height: 30px;
}
</style>
